<template>
  <div class="user">
    <header>
      <avatar
        :user-id="userInfo.id"
        :avatar="userInfo.avatar"
        :change="userInfo.id === currentUser.id"
        class="header-img"
        @after-change="getUserInfo"
      ></avatar>
      <div class="right">{{ userInfo.name }}</div>
    </header>

    <div class="content">
      <div class="title">
        {{ userInfo.id === currentUser.id ? '我的笔记' : '相关笔记' }}
      </div>

      <div v-if="noteData.data.length" class="card-item">
        <card
          v-for="item in noteData.data"
          :id="item.id"
          :key="item.id"
          :favorite="item.favorite"
          :url="item.image"
          :user-info="{
            name: item.user.name,
            avatar: item.user.avatar,
          }"
          :delete="userInfo.id === currentUser.id"
          :title="item.title"
          @delete-click="deleteHandler(item.id)"
        ></card>
      </div>
      <el-empty v-else></el-empty>

      <div class="pagination">
        <el-pagination
          v-model:page-size="searchTerms.pageSize"
          v-model:current-page="searchTerms.pageIndex"
          class="pagination"
          :total="noteData.count"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useApi } from '@core/http/api-instance';
import Card from '@pages/components/card/card.vue';
import Avatar from '@pages/components/avatar/avatar.vue';
import { GetNoteListRes } from '@core/http/apis/note/models/GetNoteListRes';
import { GetUserInfoData } from '@core/http/apis/user/models/GetUserInfoData';
import { useOathStore } from '@core/pinia/stores/oath';
import { useRoute } from 'vue-router';

// 拿到api
const api = useApi();
// 拿到用户id
const route = useRoute();
const currentUser = useOathStore().userInfo;
const noteData = ref<{ data: GetNoteListRes[]; count: number }>({
  data: [],
  count: 0,
});
// 查询条件
const searchTerms = reactive({
  pageIndex: 1,
  pageSize: 6,
});
const userInfo = ref<Partial<GetUserInfoData>>({});

// methods
//删除笔记
// 删除操作
const deleteHandler = async (id: string) => {
  const flag = await ElMessageBox.confirm('确认删除吗');
  try {
    if (flag === 'confirm') {
      searchTerms.pageIndex = 1;
      await api.note.deleteNote(id);
      ElMessage.success('删除成功');
      getNoteDetail();
    }
  } catch (e) {
    ElMessage.warning(e instanceof Error && e.message);
  }
};

// 获得用户信息
const getUserInfo = async () => {
  try {
    userInfo.value = await api.user.getUserInfo(route.params.id as string);
  } catch (e) {
    ElMessage.warning(e instanceof Error && e.message);
  }
};
//添加笔记
// 获得笔记详情
const getNoteDetail = async () => {
  try {
    const resData = await api.note.getNoteList(
      searchTerms.pageIndex,
      searchTerms.pageSize,
      route.params.id as string,
    );

    noteData.value.data = resData.data;
    noteData.value.count = resData.count;
  } catch (e) {
    ElMessage.warning(e instanceof Error && e.message);
  }
};

watch([() => searchTerms.pageIndex, () => searchTerms.pageSize], getNoteDetail);

getUserInfo();
getNoteDetail();
</script>

<style lang="scss" scoped>
.user {
  flex: 1;
  display: flex;
  height: 100%;
  width: 940px;
  flex-direction: column;
  margin: 10px auto;

  header {
    display: flex;
    font-weight: bold;
    margin-bottom: 30px;
    align-items: center;
    padding: 40px 20px 40px 20px;
    border: 1px solid var(--grey-color12);

    .right {
      font-size: 20px;
      margin-left: 20px;
    }

    .header-img {
      width: 160px;
      height: 160px;
      border-radius: 50%;
    }
  }

  .content {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .card-item {
      display: grid;
      row-gap: 10px;
      column-gap: 10px;
      grid-template-columns: repeat(3, 1fr);
    }

    .title {
      font-size: 30px;
      text-align: left;
      margin-bottom: 20px;
      color: var(--grey-color2);
    }
  }

  .pagination {
    margin-top: 10px;
  }
}
</style>
